<template>
  <div class="home">
    <Header />
    <ShowSpace />
    <ToDiscuss />
    <main>
      <section>
        <ToInformation />
        <div class="tuijian_head">
          <span class="iconfont icon-tuijian"></span>推荐
        </div>
        <TuiJian />
        <TuiJian />
      </section>
    </main>
    <NavBottom />
  </div>
</template>

<script>
// @ is an alias to /src
import Header from '@/components/Home/Home_header.vue'
import ShowSpace from '@/components/Home/showSpace.vue'
import ToDiscuss from '@/components/Home/toDiscuss.vue'
import ToInformation from '@/components/Home/toInformation.vue'
import TuiJian from '@/components/Home/tuijian.vue'

export default {
  name: 'Home',
  components: {
    Header,
    ShowSpace,
    ToDiscuss,
    ToInformation,
    TuiJian
  }
}
</script>

<style scoped>
.home {
  display: flex;
  flex-direction: column;
  background: url("../../public/background.jpg");
}
main {
  height: 4.9rem;
  overflow-y: scroll;
}
section {
  width: 100%;
  min-height: 6rem;
  border-radius: 0.1rem;
  background-color: white;
  padding: 0.15rem;
}
.tuijian_head {
  font-size: 0.18rem;
  margin-left: 0.05rem;
  font-weight: 700;
  margin-bottom: .1rem;
}
.icon-tuijian {
  font-size: 0.2rem;
  font-weight: normal;
}
</style>
